<template>
  <div class="dashboard-container">
    <div class="breadcrumb-container flex-row">
      <breadcrumb />
    </div>
    <el-divider />
    <br>
    <br>
    <el-form ref="postForm" :model="postForm" :rules="rules" label-width="85px" class="formDiv">
      <el-form-item label="名称:">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <el-input v-model="postForm.title" placeholder="请输入名称" aria-required="true" class="pad0" />
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="类型:">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="8" :lg="8" class="mtright">
            <el-select v-model="postForm.type" value-key="name" placeholder="类型:" style="width:100%" @change="changeType">
              <el-option
                v-for="One in arr"
                :key="One.id"
                :label="One.name"
                :value="One.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="postForm.type==1" label="视频:">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <Upload6 v-model="postForm.video" class="fileUpVidoe" :urls="postForm.video" :maxcount="1" title="" format="mp4" @getImage="changeVideo" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="封面:">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <Upload v-model="postForm.poster" class="fileUp" :urls="postForm.poster" :maxcount="1" title="" format="jpg,jpeg,gif,png" @getImage="changePoster" />
          </el-col>
        </el-row>
      </el-form-item>

      <el-row :xs="24" :sm="24" :lg="24">
        <el-form-item v-if="postForm.type==0" label="分享描述:" label-width="110px">
          <el-col :xs="24" :sm="20" :lg="20" class="">
            <el-input
              v-model="postForm.subtitle"
              type="textarea"
              class="pad0"
              style="width:102%"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入分享至微信的描述语"
            />
          </el-col>
        </el-form-item>
      </el-row>
      <el-form-item v-if="postForm.type==0" label="详情:" label-width="85px" class="">
        <el-row :xs="24" :sm="24" :lg="24">
          <el-col :xs="24" :sm="20" :lg="20" class="mtright">
            <Tinymce ref="editor" v-model="postForm.content" :height="400" />
          </el-col>
        </el-row>
      </el-form-item>

    </el-form>
    <!---->
    <div class="wap">
      <ul>
        <li class="titOP">{{ postForm.title }}</li>
        <li v-html="postForm.content" />
      </ul>
    </div>
    <!---->
    <br>
    <div class="text-center btnWidth">
      <el-button v-loading="loading" class="add" @click="publish()">发布</el-button>
      <el-button v-loading="loading" class="addSave" @click="saveToDraft()">保存草稿</el-button>
      <el-button v-loading="loading" class="addNot" @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import Upload from '@/components/Upload/SingleImage'
import Upload6 from '@/components/Upload/SingleImage6'
import Tinymce from '@/components/Tinymce'
import { add, update, getNewsById } from '@/api/news'

export default {
  components: {
    Upload,
    Tinymce,
    Breadcrumb,
    Upload6
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      true: false,
      loading: false,
      textarea2: '',
      tab: 1,
      arr: [
        { id: 1, name: '图文', value: 0 },
        { id: 2, name: '视频', value: 1 }
      ],
      postForm: {
        type: 0
      },
      rules: {
        title: [{ required: true, validator: validateRequire, trigger: 'change' }],
        subtitle: [{ required: true, validator: validateRequire, trigger: 'change' }],
        type: [{ required: true, validator: validateRequire, trigger: 'change' }],
        content: [{ required: true, validator: validateRequire, trigger: 'change' }]
      },
      item: {}
    }
  },
  created() {
    this.id = this.$route.query.id

    if (this.id) {
      getNewsById(this.id).then(response => {
        this.postForm = response.data
      })
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    saveToDraft() {
      this.postForm.status = 0
      this.save()
    },
    publish() {
      this.postForm.status = 1
      this.save()
    },
    cancel() {
      this.$router.push({ path: '/operation/operater' })
    },
    save() {
      // if(!this.postForm.type){
      //     this.$notify({
      //           title: '失败',
      //           message: '请选择类型',
      //           type: 'error',
      //           duration: 2000
      //       })
      //   return
      // }
      if (this.postForm.type === 0) {
        console.log(this.postForm.content)
        if (this.postForm.content === undefined || this.postForm.content === '') {
          this.$notify({
            title: '失败',
            message: '请填写详情',
            type: 'error',
            duration: 2000
          })
          return
        }
      }
      if (this.postForm.type === 1) {
        if (this.postForm.video === undefined || this.postForm.video === '') {
          this.$notify({
            title: '失败',
            message: '请填写视频',
            type: 'error',
            duration: 2000
          })
          return
        }
      }
      const data = this.postForm
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.id) {
            update(data).then(response => {
              console.log(response)

              if (response.code === 200) {
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({ path: '/operation/operater' })
              }

              // todo 这里跳转到新闻列表
            })
          } else {
            add(data).then(response => {
              console.log(response)
              this.postForm.id = response.data.id
              this.id = response.data.id
              if (response.code === 200) {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({ path: '/operation/operater' })
              }
            })
          }
        }
      })
      this.loading = false
    },
    changePoster(val) {
      this.postForm.poster = val.toString()
    },
    changeVideo(val) {
      this.postForm.video = val.toString()
    },
    changeType(val) {
      console.log('type:', val)
      this.postForm.type = val
    }
  }
}
</script>

<style lang="scss">
.overview-tabs {
  .el-tabs {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }

  .el-tabs__content {
    padding: 17px;
  }
}
</style>

<style lang="scss" scoped>
.mtright{margin-left: 27px;}
.overview-tabs {
  padding: 10px;
}

.tab-label {
  width: 76px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
}
.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.breadcrumb-container {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 14px;

  &::after {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    width: 2px;
    height: 37px;
    background-color: #5AC6B7;
    transform: translateY(-50%);
  }
}
.fileUp{width: 70px;}
.fileUpVidoe{width: auto;}
::v-deep .upload-container .el-upload{width: 70px;height: 70px;line-height: 80px;}
.pad0{padding-right: 0;}
  .btnWidth{background: #E5E9ED;padding: 15px 0;}
.btnWidth button{width:107px;height: 41px;}

.titOP{text-align:center;font-size:28px;padding:5px 0}
.wap{
    height: 703px !important;
    margin: 0 auto;
    padding: 125px 25px 159px 25px;
    width: 387px;
    margin-top: 40px;
    background: url(../../assets/images/bg-mob.png) no-repeat 0 -2217px;
    box-sizing: border-box;
    // background-size:100% 100%
}
::v-deep .el-upload.el-upload--picture-card button{width:100%}
.wap ul{height: 415px;
    overflow-y: auto;}
.wap  li img{width:100%}
</style>
